import { Meta, Image, Intro, Teaser } from '../../.storybook/components';

<Meta title="Introduction/Welcome" />

<Image
  width="2400"
  height="1000"
  alt="Logo of SumUp's Circuit UI design system"
  src="/images/logo-name-brand-light.png"
  darkSrc="/images/logo-name-brand-dark.png"
  style={{ margin: '0 auto 36px' }}
/>

<Intro>
  Circuit UI is the web implementation of the SumUp Circuit Design System. Our
  primary goal is to create a system that can be used to build a wide variety of
  web applications, while providing a consistent, accessible, and performant
  user experience to our users.
</Intro>

[![Version](https://img.shields.io/npm/v/@sumup-oss/circuit-ui)](https://www.npmjs.com/package/@sumup-oss/circuit-ui) [![Coverage](https://img.shields.io/codecov/c/github/sumup-oss/circuit-ui)](https://codecov.io/gh/sumup-oss/circuit-ui) [![License](https://img.shields.io/github/license/sumup-oss/circuit-ui)](https://github.com/sumup-oss/circuit-ui/tree/main/LICENSE) [![Stars](https://img.shields.io/github/stars/sumup-oss/circuit-ui?style=social)](https://github.com/sumup-oss/circuit-ui/)

<Teaser title="Getting started">

Set up a new app with Circuit UI or add it to an existing project.

[Get started](Introduction/Getting-Started/Docs)

</Teaser>

<Teaser title="Contributing">

File a bug report, suggest a change, or open a pull request.

[Contribute](Contributing/Overview/Docs)

</Teaser>

<Teaser title="Design tokens">

Learn about our foundations such as colors, spacing, and typography.

[Browse theme reference](Features/Theme/Docs)

</Teaser>

<Teaser title="Icons">

Explore available icons in the Circuit UI icons library.

[Browse icons](Features/Icons/Docs)

</Teaser>

<div style={{ clear: 'both', height: '2rem' }} />

## Code of conduct

We want to foster an inclusive and friendly community around our Open Source efforts. Like all SumUp Open Source projects, this project follows the Contributor Covenant Code of Conduct. Please, [read it and follow it](https://github.com/sumup-oss/circuit-ui/blob/main/CODE_OF_CONDUCT.md).

If you feel another member of the community violated our CoC or you are experiencing problems participating in our community because of another individual's behavior, please get in touch with our maintainers. We will enforce the CoC.

## About SumUp

[SumUp](https://sumup.com) is a mobile-point of sale provider. It is our mission to make easy and fast card payments a reality across the _entire_ world. You can pay with SumUp in more than 30 countries, already. Our engineers work in Berlin, Copenhagen, Kiev, Sofia, and Sāo Paulo. We write code in TypeScript, Swift, Go, Elixir, Erlang, and much more. Want to come and work with us? [Head to our careers page](https://sumup.com/careers) to find out more.
